<template>
    <div class="common-size" style="background:#FFF">
        <div class="directory-head">目录</div>
        <div v-html="item" v-for="(item, index) in list">
        </div>

       
    </div>
</template>

<script>
import PageFooter from "./pageFooter.vue";
import {nuxtMixins} from '../assets/javascript/mixin'
  export default{
    name: 'page_directory',
    props:['chartData'],
    mixins: [nuxtMixins],
    data () {
      return {
        list:''
      }
    },
    methods: {
        getInfoData(){
            let data = this.$props.chartData;
            this.list = data
        }
    },
    computed:{
    },
    mounted(){
        this.getInfoData()
    },
    components: {
      PageFooter
    }
  }
</script>
<style lang="scss">
.directory-head{
    color: #FFF;
    height: 40px;
    line-height: 40px;
    font-size: 26px;
    width: 600px;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    background: #3670b7;
    padding-left: 40px;
    margin: 20px 0 20px 0 ;
}

.directory-title{
    font-size: 46px;
    width:700px;
    height: 94px;
    overflow: hidden;
    color: #3670b7;
    font-weight: bold;
    margin: 0 0 0 30px;

    .directory-title-num{
        position: relative;
        >div{
            width: 50px;
            height: 20px;
            background: url("../assets/images/cover-triangle.jpg") no-repeat;
            background-size: 50px 20px;
            position: absolute;
            bottom: 0px;
            left:0px;
            transform: rotate(162deg) translate(-6px,2px);
        }
    }
    .directory-title-item{
        width: 700px;
        >div{
            color: #3670b7;
            font-weight: bold;
            font-size: 28px;
            height: 40px;
            &:nth-child(1){
                width: 650px;
                text-align: left;
            }
            &:nth-child(2){
                width: 50px;
                text-align: left;
            }
        }
    }
}

.directory-item{
    height: 30px;
    line-height: 30px;
    color: #000;
    font-weight: bold;
    font-size: 26px;
    margin: 0 0 0 60px;
    >div{
        &:nth-child(1){
            width: 50px;
            text-align: left;
        }
        &:nth-child(2){
            width: 570px;
            text-align: left;
        }
        &:nth-child(3){
            width: 50px;
            text-align: left;
        }
    }
}
</style>
